<template>

  <VFormDesigner ref="vfDesignerRef" :designer-config="designerConfig" :global-dsv="globalDsv" :field-list-api="fieldApi">
    <template #customToolButtons>
      <el-button type="text" @click="saveFormJson">保存</el-button>
    </template>
  </VFormDesigner>
</template>

<script>
import { listDefine, getDefine, delDefine, addDefine, updateDefine } from "@/api/system/define";
export default {
  name: "ListSearchDefine",
  data() {
    return {
      designerConfig: {
        resetFormJson: false,
        toolbarMaxWidth: 490,
      },
      defineId:null,

      //全局数据源变量
      globalDsv: {
        testApiHost: 'http://www.test.com/api',
        testPort: 8080,
      },
      fieldApi:{
        URL: '',
        nameKey: 'componentId',
        labelKey: 'label',
        headers: {
        //后端需要token请设置请求头对象，后端如不需要可不设置
      }
    }
    }
  },
  created() {
    this.defineId = this.$route.query.defineId;
    this.fieldApi.URL = 'http://localhost:8080/system/column/field-list-api/'+this.defineId
    getDefine(this.defineId).then(res=>{
      if(res.data.listSearchDefineDesc==null){
        this.$refs.vfDesignerRef.clearDesigner()
      }else {
        this.$refs.vfDesignerRef.setFormJson(res.data.listSearchDefineDesc)
      }
    })
  },
  mounted() {
    this.defineId = this.$route.query.defineId;
    getDefine(this.defineId).then(res=>{
      console.log(res)
      if(res.data.listSearchDefineDesc==null){
        this.$refs.vfDesignerRef.clearDesigner()
      }else {
        this.$refs.vfDesignerRef.setFormJson(res.data.listSearchDefineDesc)
      }

    })
  },
  methods: {
    printFormJson() {
      //console.log( this.$refs.vfDesignerRef.getFormJson() )
      this.$refs.vfDesignerRef.setFormJson();
    },
    saveFormJson(){
      let obj={};
      obj.listSearchDefineDesc =(this.$refs.vfDesignerRef.getFormJson());
      obj.id=this.defineId
      if(this.defineId==0){
        addDefine(obj).then(res=>{
          this.$message.success("已保存")
        })
      }else {
        updateDefine(obj).then(res=>{
          this.$message.success("已保存")
        })
      }
      console.log(this.$refs.vfDesignerRef.getFormJson())


    }
  }
}
</script>

<style lang="scss">
body {
  margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
}
</style>
